<template>
  <view :class="[iconClass, size === 'small' ? 'small-icon' : 'large-icon']">
    <template v-if="type === 'anniversary'">
      <view :class="size === 'small' ? 'icon-heart-small' : 'icon-heart'"></view>
    </template>
  </view>
</template>

<script>
export default {
  name: 'ToolIcon',
  props: {
    type: {
      type: String,
      required: true,
      validator: (value) => ['anniversary', 'memo', 'diary', 'accounting', 'schedule'].includes(value)
    },
    size: {
      type: String,
      default: 'large',
      validator: (value) => ['large', 'small'].includes(value)
    }
  },
  computed: {
    iconClass() {
      const isSmall = this.size === 'small';
      const iconMap = {
        anniversary: isSmall ? 'icon-calendar-small' : 'icon-calendar',
        memo: isSmall ? 'icon-memo-small' : 'icon-memo',
        diary: isSmall ? 'icon-diary-small' : 'icon-diary',
        accounting: isSmall ? 'icon-accounting-small' : 'icon-accounting',
        schedule: isSmall ? 'icon-schedule-small-new' : 'icon-schedule-new'
      };
      return iconMap[this.type];
    }
  }
}
</script>

<style>
/* 图标样式 */
.icon-calendar, .icon-memo, .icon-diary, .icon-accounting, .icon-schedule-new {
  width: 80rpx;
  height: 70rpx;
  border-radius: 10rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-calendar {
  background-color: #FE748B;
}

.icon-memo {
  background-color: #7766E7;
}

.icon-diary {
  background-color: #FFCD00;
}

.icon-accounting {
  background-color: #518BF1;
}

.icon-schedule-new {
  background-color: #1EBD85;
}

/* 小图标样式 */
.icon-calendar-small, .icon-memo-small, .icon-diary-small, .icon-accounting-small, .icon-schedule-small-new {
  width: 45rpx;
  height: 35rpx;
  border-radius: 5rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-calendar-small {
  background-color: #FE748B;
}

.icon-memo-small {
  background-color: #7766E7;
}

.icon-diary-small {
  background-color: #FFCD00;
}

.icon-accounting-small {
  background-color: #518BF1;
}

.icon-schedule-small-new {
  background-color: #1EBD85;
}

/* 图标内部元素样式 */
.icon-calendar:before {
  content: "";
  position: absolute;
  width: 10rpx;
  height: 15rpx;
  background-color: #FFC9D2;
  border-radius: 5rpx;
  top: -8rpx;
  left: 12rpx;
}

.icon-calendar:after {
  content: "";
  position: absolute;
  width: 10rpx;
  height: 15rpx;
  background-color: #FFC9D2;
  border-radius: 5rpx;
  top: -8rpx;
  right: 12rpx;
}

.icon-calendar-small:before {
  content: "";
  position: absolute;
  width: 5rpx;
  height: 8rpx;
  background-color: #FFC9D2;
  border-radius: 2rpx;
  top: -4rpx;
  left: 6rpx;
}

.icon-calendar-small:after {
  content: "";
  position: absolute;
  width: 5rpx;
  height: 8rpx;
  background-color: #FFC9D2;
  border-radius: 2rpx;
  top: -4rpx;
  right: 6rpx;
}

.icon-heart {
  width: 36rpx;
  height: 36rpx;
  background-color: #FFC9D2;
  transform: rotate(45deg);
  position: relative;
}

.icon-heart:before, .icon-heart:after {
  content: "";
  position: absolute;
  width: 36rpx;
  height: 36rpx;
  background-color: #FFC9D2;
  border-radius: 50%;
}

.icon-heart:before {
  top: -18rpx;
  left: 0;
}

.icon-heart:after {
  top: 0;
  left: -18rpx;
}

.icon-heart-small {
  width: 18rpx;
  height: 18rpx;
  background-color: #FFC9D2;
  transform: rotate(45deg);
  position: relative;
}

.icon-heart-small:before, .icon-heart-small:after {
  content: "";
  position: absolute;
  width: 18rpx;
  height: 18rpx;
  background-color: #FFC9D2;
  border-radius: 50%;
}

.icon-heart-small:before {
  top: -9rpx;
  left: 0;
}

.icon-heart-small:after {
  top: 0;
  left: -9rpx;
}

/* 备忘录图标 */
.icon-memo:before {
  content: "";
  position: absolute;
  width: 20rpx;
  height: 20rpx;
  background-color: #EAEDFF;
  top: 15rpx;
  right: -5rpx;
  transform: rotate(45deg);
}

.icon-memo:after {
  content: "";
  position: absolute;
  width: 40rpx;
  height: 6rpx;
  background-color: #EAEDFF;
  top: 30rpx;
  left: 10rpx;
  box-shadow: 0 12rpx 0 0 #EAEDFF, 0 24rpx 0 0 #EAEDFF;
}

.icon-memo-small:before {
  content: "";
  position: absolute;
  width: 10rpx;
  height: 10rpx;
  background-color: #EAEDFF;
  top: 8rpx;
  right: -3rpx;
  transform: rotate(45deg);
}

.icon-memo-small:after {
  content: "";
  position: absolute;
  width: 20rpx;
  height: 3rpx;
  background-color: #EAEDFF;
  top: 15rpx;
  left: 5rpx;
  box-shadow: 0 6rpx 0 0 #EAEDFF, 0 12rpx 0 0 #EAEDFF;
}

/* 日记图标 */
.icon-diary:before {
  content: "";
  position: absolute;
  width: 40rpx;
  height: 15rpx;
  background-color: #FFEEA8;
  top: 15rpx;
  left: 10rpx;
  border-radius: 5rpx;
}

.icon-diary-small:before {
  content: "";
  position: absolute;
  width: 20rpx;
  height: 8rpx;
  background-color: #FFEEA8;
  top: 8rpx;
  left: 5rpx;
  border-radius: 3rpx;
}

/* 记账图标 */
.icon-accounting:before {
  content: "";
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  border: 4rpx solid #AAC9FF;
  border-radius: 50%;
  top: 15rpx;
  left: 13rpx;
}

.icon-accounting:after {
  content: "";
  position: absolute;
  width: 4rpx;
  height: 20rpx;
  background-color: #AAC9FF;
  bottom: 10rpx;
  left: 28rpx;
}

.icon-accounting-small:before {
  content: "";
  position: absolute;
  width: 15rpx;
  height: 15rpx;
  border: 2rpx solid #AAC9FF;
  border-radius: 50%;
  top: 8rpx;
  left: 7rpx;
}

.icon-accounting-small:after {
  content: "";
  position: absolute;
  width: 2rpx;
  height: 10rpx;
  background-color: #AAC9FF;
  bottom: 5rpx;
  left: 14rpx;
}

/* 课程表图标 */
.icon-schedule-new:before {
  content: "";
  position: absolute;
  width: 10rpx;
  height: 15rpx;
  background-color: #C8EFE1;
  border-radius: 5rpx;
  top: -8rpx;
  left: 12rpx;
}

.icon-schedule-new:after {
  content: "";
  position: absolute;
  width: 10rpx;
  height: 15rpx;
  background-color: #C8EFE1;
  border-radius: 5rpx;
  top: -8rpx;
  right: 12rpx;
}

.icon-schedule-new::after {
  content: "";
  position: absolute;
  width: 8rpx;
  height: 8rpx;
  background-color: #C8EFE1;
  border-radius: 50%;
  top: 20rpx;
  left: 12rpx;
  box-shadow: 
    12rpx 0 0 0 #C8EFE1, 
    24rpx 0 0 0 #C8EFE1, 
    36rpx 0 0 0 #C8EFE1,
    0 12rpx 0 0 #C8EFE1, 
    12rpx 12rpx 0 0 #C8EFE1, 
    24rpx 12rpx 0 0 #C8EFE1, 
    36rpx 12rpx 0 0 #C8EFE1,
    0 24rpx 0 0 #C8EFE1, 
    12rpx 24rpx 0 0 #C8EFE1, 
    24rpx 24rpx 0 0 #C8EFE1, 
    36rpx 24rpx 0 0 #C8EFE1,
    0 36rpx 0 0 #C8EFE1, 
    12rpx 36rpx 0 0 #C8EFE1, 
    24rpx 36rpx 0 0 #C8EFE1, 
    36rpx 36rpx 0 0 #C8EFE1;
}

.icon-schedule-small-new:before {
  content: "";
  position: absolute;
  width: 5rpx;
  height: 8rpx;
  background-color: #C8EFE1;
  border-radius: 2rpx;
  top: -4rpx;
  left: 6rpx;
}

.icon-schedule-small-new:after {
  content: "";
  position: absolute;
  width: 5rpx;
  height: 8rpx;
  background-color: #C8EFE1;
  border-radius: 2rpx;
  top: -4rpx;
  right: 6rpx;
}

.icon-schedule-small-new::after {
  content: "";
  position: absolute;
  width: 4rpx;
  height: 4rpx;
  background-color: #C8EFE1;
  border-radius: 50%;
  top: 10rpx;
  left: 6rpx;
  box-shadow: 
    6rpx 0 0 0 #C8EFE1, 
    12rpx 0 0 0 #C8EFE1, 
    18rpx 0 0 0 #C8EFE1,
    0 6rpx 0 0 #C8EFE1, 
    6rpx 6rpx 0 0 #C8EFE1, 
    12rpx 6rpx 0 0 #C8EFE1, 
    18rpx 6rpx 0 0 #C8EFE1,
    0 12rpx 0 0 #C8EFE1, 
    6rpx 12rpx 0 0 #C8EFE1, 
    12rpx 12rpx 0 0 #C8EFE1, 
    18rpx 12rpx 0 0 #C8EFE1,
    0 18rpx 0 0 #C8EFE1, 
    6rpx 18rpx 0 0 #C8EFE1, 
    12rpx 18rpx 0 0 #C8EFE1, 
    18rpx 18rpx 0 0 #C8EFE1;
}
</style>